<script setup>
import {ref} from "vue";
import JsonEditor from "@/components/JsonEditor.vue";

defineOptions({ name: 'JSONPretty' })

const value = ref('')
const remark = "输入 JSON 数据，可进行格式化、校验、压缩、修复等处理"
const jsonEditorRef = ref()

function generate() {
  jsonEditorRef.value.refresh()
}

function handleJsonChange(json) {
  value.value = json
}
</script>

<template>
  <tool-page title="JSON 格式化" :value="value" @generate="generate" hidden-operate :remark="remark">
    <template #value></template>
    <template #extra>
      <json-editor style="margin-top: 10px; height: 70vh" ref="jsonEditorRef" @change="handleJsonChange"></json-editor>
    </template>
    <template #operateButton>

    </template>
  </tool-page>
</template>

<style scoped lang="scss">

</style>
